<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <el-button>
            撤销
            <el-icon>
              <refresh-left />
            </el-icon>
          </el-button>
          <el-button>
            下一步
            <el-icon>
              <refresh-right />
            </el-icon>
          </el-button>
        </div>
      </el-col>
      <el-col :span="2" :offset="8">
        <div class="grid-content bg-purple">
          <el-dropdown>
            <el-button>
              光标设置
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>将当前的T1作为T0’</el-dropdown-item>
                <el-dropdown-item>显示自定义的T0’</el-dropdown-item>
                <el-dropdown-item>取消自定义的T0’</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-purple">
          <el-dropdown>
            <el-button>
              波形
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>一次值</el-dropdown-item>
                <el-dropdown-item>真有效值</el-dropdown-item>
                <el-dropdown-item>基有效值</el-dropdown-item>
                <el-dropdown-item>基波有效值</el-dropdown-item>
                <el-dropdown-item>相角</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-purple">
          <el-dropdown>
            <el-button>
              处理区间
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </el-button>

            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>展开</el-dropdown-item>
                <el-dropdown-item>显示全图</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-radio-group v-model="radio" size="small">
            <el-radio-button label="1">全部显示</el-radio-button>
            <el-radio-button label="2">隐藏</el-radio-button>
            <el-radio-button label="3">显示离散点</el-radio-button>
          </el-radio-group>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { RefreshLeft, RefreshRight, ArrowDown } from "@element-plus/icons-vue";

// 显示单选框
const radio: number = ref(1);
</script>